<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生列表</title>
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="student_list" border="1" bgcolor="#f0f8ff" width="600px"></table>
<script>
    $(function (){
        $("#student_list").bootstrapTable({
            url:"/list.do",//数据地址
            striped:true,//是否显示行的间隔
            pageNumber:1,//初始化加载第几页
            pagination: true,//是否分页
            sidePagination: 'server',//?
            pageSize: 5,
            pageList: [5,10,20],//每一页显示对象
            showRefresh: true,//自动刷新
            queryParams:function (params){
                var temp = {
                    paging:this.pagination,
                    offset:params.offset,
                    limit: params.limit
                };
                return temp;
            },
            /*与BootStrapCourier里面属性对应*/
            columns:[
                {
                    title:"编号",
                    field:"id",
                    sortable:false
                }, {
                    title:"姓名",
                    field:"name",
                    sortable:false
                }, {
                    title:"年龄",
                    field:"age",
                    sortable:false
                },{
                    title:"性别",
                    field:"sex",
                    sortable:false
                }
            ]
        })
    })
</script>
</body>
</html>
